<template>
  <!-- 面试技巧 -->
  <div class="interview">
    <div class="item">
      <div class="left">
        <div
          class="header_title"
          v-html="item.title"
          @click="$router.push(`/technicDetail/${item.id}`)"
        ></div>
        <div class="bottom">
          <span>{{ item.created_at | formatTime }}</span>
          <span class="mid">
            <i class="iconfont iconicon_liulanliang"></i>
            {{ item.read }}
          </span>
          <span>
            <i class="iconfont iconbtn_dianzan_small_nor" ></i>
            {{ item.star }}
          </span>
        </div>
      </div>
      <div class="right" @click="$router.push(`/technicDetail/${item.id}`)">
        <img
          :src="item.cover !== null ? baseURL + item.cover : imgUrl"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
// import { starArticle } from '@/api/api.js'
export default {
  props: ['item'],
  data () {
    return {
      baseURL: process.env.VUE_APP_URL,
      imgUrl:
        'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1396521707,1973816781&fm=26&gp=0.jpg'
    }
  }
  // methods: {
  //   async zan () {
  //     const res = await starArticle()
  //     console.log(res)
  //   }
  // }
}
</script>

<style lang="less">
.interview {
  background-color: #fff;
  padding: 0 10px;
  .item {
    display: flex;
    padding-bottom: 20px;
    .left {
      flex: 6;
      margin-right: 20px;
      .bottom {
        margin-top: 22px;
        font-size: 12px;
        color: #b4b4bd;
        .mid {
          margin: 0 18px 0 50px;
        }
      }
      .header_title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 16px;
      }
    }
    .right {
      flex: 4;
      img {
        width: 100%;
      }
    }
  }
}
</style>
